// @ts-ignore
import styles from '!!raw-loader!./ant-design-vue@1.7.8.css'
// @ts-ignore
import color from 'css-color-function'
// antd-vue原有默认的主题色
const DEFAULT_COLORS = {
    mainColor: '#1890ff',
    hoverColor: '#40a9ff',
    activeColor: '#096dd9',
    borderColor: '#91d5ff',
    backgroundColor: '#e6f7ff'
}

/**
 * 改变主题色
 * @param mainColor 新主题色
 */
export const changeThemeColor = (mainColor: string) => {
    
    // 深色20%
    const activeColor = color.convert(`color(${mainColor} shade(20%))`);
    // 浅色20%
    const hoverColor = color.convert(`color(${mainColor} tint(20%))`);
    // 浅色40%
    const borderColor = color.convert(`color(${mainColor} tint(40%))`);
    // 浅色90%
    const backgroundColor = color.convert(`color(${mainColor} tint(90%))`);
    const changeMap = {
        mainColor,
        hoverColor,
        activeColor,
        borderColor,
        backgroundColor
    }
    
    // 将新旧颜色做映射
    const map = Object.entries(DEFAULT_COLORS).reduce((acc, [key, value]) => {
        acc[value] = changeMap[key as keyof typeof DEFAULT_COLORS]
        return acc;
    }, {} as any)

    // 利用正则进行颜色替换
    const colorStr = Object.values(DEFAULT_COLORS).join('|')
    const newStrles =  styles.replace(new RegExp(`(${colorStr})`, 'ig'), (str: string) => {
        return map[str]
    })
    if (document) {
        let styleEl = document.head.querySelector('style#theme-color')
        if (!styleEl) {
            styleEl = document.createElement('style')
            styleEl.id = 'theme-color'
            document.head.appendChild(styleEl)
        }
        styleEl.innerHTML = newStrles
    }
    
}